<template>
	<view>
		<u-sticky>
			<view class='header'
				:style="{backgroundImage:`${login && userInfor && userInfor.user.backgroundImg ? `url(${userInfor.user.backgroundImg})` : 'linear-gradient(to right, #FE7C67, #634FDF)'}`}">
				<view class="header1"></view>
				<view class="infor" v-if="login && userInfor">
					<image :src="userInfor.user.userProfileImg ? userInfor.user.userProfileImg : ''" class="img1">
					</image>
					<view class="text">
						<view>{{ userInfor.user.username ? userInfor.user.username : '' }}</view>
						<view @tap="jumpSet" class="set">
							<u-icon name="setting" color="#fff" size="24"></u-icon>
						</view>
						<!-- <view>
							荔知游ID：{{ userInfor.user.uuid.length < 10 ? userInfor.user.uuid : address2simple(userInfor.user.uuid, 10)   }}
						</view> -->
					</view>
				</view>
				<view v-else class="infor" @tap="jumpLogin">
					<image src="/static/my/headerImg.png" class="img1"></image>
					<view class="color_fff fontS32 mar_left15">点击登录</view>
				</view>
				<view class="totalBox">
					<view class="number" @click="goFllowList">
						<view v-if="login && userInfor.follow">{{ userInfor.follow }}</view>
						<view v-else>0</view>
						<view>关注</view>
					</view>
					<view class="number" @click="goFanList">
						<view v-if="login && userInfor.fans">{{ userInfor.fans }}</view>
						<view v-else>0</view>
						<view>粉丝</view>
					</view>
					<view class="number">
						<view v-if="login && userInfor.planLike">
							{{ userInfor.planLike + userInfor.planSave }}
						</view>
						<view style="margin-left: 20rpx;" v-else>0</view>
						<view>获赞与收藏</view>
					</view>
					<view v-if="login" class="choose" @click="choose">
						更换封面
					</view>
				</view>
				<view class="tabs-box">
					<u-tabs :list="list1" :current="current" :activeStyle="{
					    color: '#000',
					    fontWeight: '600',
						fontFamily: 'PingFang SC',
						fontSize: '30rpx',
						letterSpacing: '2rpx',
					}" :inactiveStyle="{
					    color: '#000',
					    fontWeight: '600',
					    fontSize: '30rpx',
						fontFamily: 'PingFang SC',
					    letterSpacing: '2rpx',
					}" :scrollable="false" lineWidth="20" lineColor="#E5725F" @click="change">
					</u-tabs>
				</view>

			</view>
		</u-sticky>

		<view class="main">
			<!-- 瀑布流布局列表 -->
			<view v-if="login" class="padding_l_r20 mar_top20 mar_bottom30">
				<view class="pubuItem">
					<view v-if="followNode.length > 0 && current == 0" class="p_relative item-masonry">
						<image class="draft-img" :src="followNode[0].images[0]" mode="widthFix"></image>
						<view class="modal" @click="goDraft">
							<image src="/static/image/icon/draft.png" class="boxImg"></image>
							<view class="boxText">本地草稿</view>
							<view class="boxText1">有{{ followNode.length }}篇笔记待发布 ></view>
						</view>
					</view>
					<view class="item-masonry pad_bottom20" v-for="item in dataNode" :key="item.id"
						@click="goDetail(item.planUuid)">
						<image :src="item.images ? item.images[0] : ''" mode="widthFix"></image>
						<view class="listtitle padding_l_r20">
							<!-- 这是没有高度的父盒子（下半部分） -->
							<view class="listtitle1 fontS28 color_222222">{{ item.title }}</view>
							<view class="mar_top16 flex justify-between align-center">
								<view class="head flex align-center">
									<!-- <image src="/static/image/icon/vector.png" mode="" class="head-img"></image> -->
									<u-icon v-if="item.userLiked" name="heart-fill" color="red" size="14"></u-icon>
									<u-icon v-else name="heart" size="14"></u-icon>
									<text class="head-name">{{ item.likes }}</text>
								</view>
								<view class="aixin flex align-center">
									<image src="/static/image/icon/eye.png" mode="" class="head-img"></image>
									<text class="aixin-text">{{ item.saves }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="dataNode.length <= 0" class="emptyBox">
				<view class="empty">
					<image src="/static/my/empty.png"></image>
					<view>什么都没有～</view>
				</view>
			</view>
			<z-tabbar :current="2" :fixed="true"></z-tabbar>
		</view>
	</view>

</template>

<script setup>
	import zTabbar from '@/components/z-tabbar/z-tabbar.vue';
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance,
		watch
	} from 'vue';

	import {
		onLoad,
		onShow,
		onHide,
		onShareAppMessage
	} from '@dcloudio/uni-app';
	import {
		useCounterStore
	} from '@/stores/login.js';

	import {
		baseUrl
	} from '@/utils/request.js';
	// const counter = useCounterStore()
	const login = ref(false);
	const list1 = ref([{
		name: '我的',
	}, {
		name: '私密'
	}, {
		name: '收藏'
	}, {
		name: '喜欢'
	}])
	// 草稿封面图
	const draftCover = ref([]);
	const userInfor = ref('');
	const dataNode = ref([]);
	const followNode = ref([]);
	const current = ref(0)
	const isShow = ref(true);
	const {
		proxy
	} = getCurrentInstance();

	const jumpLogin = () => {
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}

	const choose = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original'],
			sourceType: ['album', 'camera'],
			success: res => {
				if (res.tempFiles[0].size > 1024 * 1024) {
					uni.showToast({
						title: '上传图片不能大于1MB',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (res.errMsg === "chooseImage:ok") {
					uni.uploadFile({
						url: `${baseUrl}/user/background/`,
						filePath: res.tempFilePaths[0],
						header: {
							token: uni.getStorageSync("token"),
						},
						name: "file",
						success: res => {
							let img = JSON.parse(res.data)
							if (img.code == "10000") {
								userNode()
							}
						}
					})
				}
			}
		})
	}
	const goFanList = () => {
		if (uni.getStorageSync('token')) {
			uni.navigateTo({
				url: "/pages/my/fanList"
			})
		} else {
			uni.navigateTo({
				url: "/pages/login/login"
			})
		}
	}
	const goFllowList = () => {
		if (uni.getStorageSync('token')) {
			uni.navigateTo({
				url: "/pages/my/followList"
			})
		} else {
			uni.navigateTo({
				url: "/pages/login/login"
			})
		}
	}
	const goDraft = () => {
		uni.navigateTo({
			url: "/pages/my/draft"
		})
	}
	const goDetail = (id) => {
		// 去详情页面
		uni.navigateTo({
			url: `/pages/index/details?id=${id}`
		})
	}
	const address2simple = (address, cut) => {
		let length = address.length;
		if (!address || length < cut * 2) {
			return "";
		}
		let prefix = address.substring(0, cut);
		let suffix = address.substring(length - cut, length);
		return `${prefix}...${suffix}`;
	}
	const total = async () => {
		const res = await proxy.$api.myData(1)
		dataNode.value = res.data
	}
	const total1 = async () => {
		const res = await proxy.$api.myData1("true")
		dataNode.value = res.data
	}
	const total2 = async () => {
		const res = await proxy.$api.getUserPlans("liked")
		dataNode.value = res.data
	}
	const total3 = async () => {
		const res = await proxy.$api.getUserPlans("saved")
		dataNode.value = res.data
	}
	const change = (e) => {
		if (uni.getStorageSync('token')) {
			current.value = e.index
			if (current.value === 0) {
				total()
			} else if (current.value === 1) {
				total1()
			} else if (current.value === 2) {
				total3()
			} else if (current.value === 3) {
				total2()
			}
		}
	}

	const userNode = () => {
		proxy.$api.getUserInfor().then(res => {
			userInfor.value = res.data
			uni.setStorageSync('user_info', JSON.stringify(userInfor.value))
		})
	}

	const getDraft = () => {
		proxy.$api.myData2(0).then(res => {
			if (res.code === "10000") {
				followNode.value = res.data
				// followNode.value.forEach(item => {
				// 	if (item.images.length > 0) {
				// 		return draftCover.value = item.images
				// 	}
				// })
			}
		})
	}

	// 前往设置中心
	const jumpSet = () => {
		uni.navigateTo({
			url: '/my-actions/set/set'
		})
	}

	onShow(() => {
		if (uni.getStorageSync("token")) {
			login.value = true
			userNode()
			getDraft()
			total()
		}
	})
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 640rpx;
		background-image: linear-gradient(to right, #FE7C67, #634FDF);
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;

		.infor {
			display: flex;
			align-items: center;
			padding-top: 222rpx;
			margin-left: 24rpx;
			position: relative;
			z-index: 10;

			.set {
				// position: absolute;
				// right: 20rpx;
				// top: 210rpx;
				// transform: translate(-50%);
			}

			.img1 {
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%;
			}

			.text {
				width: 530rpx;
				height: 20rpx;
				margin-left: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				view {
					&:first-child {
						color: #fff;
						font-size: 36rpx;
					}
				}

				view {
					&:last-child {
						color: rgba(255, 255, 255, 0.5);
						font-size: 28rpx;
					}
				}
			}
		}

		.totalBox {
			display: flex;
			margin-top: 60rpx;
			position: relative;
			z-index: 10;

			.number {
				margin-left: 24rpx;
				margin-right: 36rpx;

				view {
					&:first-child {
						color: #fff;
						font-family: PingFang SC;
						font-size: 28rpx;
						font-weight: 500;
						text-align: center;
					}
				}

				view {
					&:last-child {
						font-family: PingFang SC;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(255, 255, 255, 0.5)
					}
				}
			}

			.choose {
				width: 120rpx;
				height: 40rpx;
				border-radius: 20rpx;
				background-color: rgba(255, 255, 255, 0.5);
				font-size: 22rpx;
				color: #fff;
				text-align: center;
				line-height: 40rpx;
				margin-left: 200rpx;
				margin-top: 20rpx;
			}
		}

		.tabs-box {
			width: 100%;
			position: absolute;
			bottom: -2rpx;
			transform: translate3d(-50%);
		}
	}
	.header1{
		width: 100%;
		height: 640rpx;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0.3);
	}

	.pubuItem {
		column-count: 2;
		column-gap: 20rpx;
	}

	.item-masonry {
		box-sizing: border-box;
		border-radius: 15rpx;
		overflow: hidden;
		background-color: #fff;
		break-inside: avoid;
		/*避免在元素内部插入分页符*/
		box-sizing: border-box;
		margin-bottom: 20rpx;
		// box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);

		.draft-img {
			height: 240rpx !important;
			border-radius: 8rpx !important;
			display: flex;
		}
	}

	.item-masonry image {
		width: 100%;
	}

	.listtitle {

		.listtitle1 {
			line-height: 39rpx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
			min-height: 39rpx;
			max-height: 78rpx;
			font-weight: 500;
		}

		.listtitle2 {
			color: #ff0000;
			font-size: 32rpx;
			line-height: 32rpx;
			font-weight: bold;
			padding-top: 22rpx;

			.listtitle2son {
				font-size: 32rpx;
			}
		}

		.listtitle3 {
			font-size: 28rpx;
			color: #909399;
			line-height: 32rpx;
			padding-top: 22rpx;
		}
	}

	.main {
		width: 100%;
		min-height: 880rpx;
		background-color: #f8f8f8;
		overflow-y: auto;

		.emptyBox {
			width: 100%;
			background-color: #f8f8f8;
			height: 692rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.empty {
				width: 228rpx;
				margin: 0 auto;
				font-family: PingFang SC;
				font-size: 24rpx;
				font-weight: 400;
				color: #6D6D6D;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				image {
					width: 228rpx;
					height: 268rpx;
					margin-bottom: 30rpx;
				}
			}
		}

		.modal {
			width: 360rpx;
			height: 240rpx;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 8rpx;
			background-color: rgba(0, 0, 0, 0.3);

			.boxImg {
				width: 48rpx;
				height: 48rpx;
				display: block;
				margin: 0 auto;
				margin-top: 28rpx;
			}

			.boxText {
				font-family: PingFang SC;
				font-size: 28rpx;
				font-weight: 500;
				color: #fff;
				text-align: center;
				margin-top: 20rpx;
			}

			.boxText1 {
				font-family: PingFang SC;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 0.7);
				text-align: center;
				margin-top: 5rpx;
			}
		}

		.head {
			display: flex;
			align-items: center;

			color: #6D6D6D
		}

		.head-img {
			width: 24rpx;
			height: 24rpx;
			border-radius: 50%;
		}

		.head-name {
			font-size: 20rpx;
			margin-left: 10rpx;
		}

		.aixin {
			width: auto;
			line-height: 30rpx;
			display: flex;
			align-items: center;
			color: #6D6D6D;
		}

		.aixin-text {
			font-size: 20rpx;
			margin-left: 8rpx;
		}

	}

	::v-deep .u-tabs {
		height: 100rpx !important;
		background-color: #fff !important;
		border-radius: 30rpx 30rpx 0 0 !important;
	}
</style>
